<!--
  module - 设备管理

  @author lgx 2021-06-07
-->
<template>
  <div>
    <div class="search-bar">
      <div class="base-condition">
        <el-row justify="space-between">
          <el-col :span="8">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">全部设备</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="16" style="text-align:right;">
            <!-- <el-link type="primary" style="line-height:50px;margin-right:15px;" @click="showF = !showF">更多筛选</el-link> -->
            <el-select v-model="listQuery.enterpriseId" filterable placeholder="所属企业" style="display: inline-block;width: 200px;margin-right:15px;" @change="search">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="listQuery.name"
              placeholder="请输入设备名称"
              class="radius-input"
              style="width: 200px;margin-top:7px;"
              clearable
              @keyup.enter.native="search"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" @click="search" />
            </el-input>
            <el-input
              v-model="listQuery.code"
              placeholder="请输入编号"
              class="radius-input"
              style="width: 200px;margin-top:7px;"
              clearable
              @keyup.enter.native="search"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" @click="search" />
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div v-show="showT" class="query-result">
        <span class="filter-title">筛选条件：</span>
        <div
          v-for="(val, key) in listQuery"
          v-show="(key === 'code' || key === 'name' || key === 'enterpriseId') && val !== ''"
          :key="key"
          class="filter-item"
        >
          <div v-if="key === 'name'" class="filter-item">
            名称：{{ val }}<i class="el-icon-close" @click="listQuery.name = '';search()" />
          </div>
          <div v-if="key === 'code'" class="filter-item">
            编号：{{ val }}<i class="el-icon-close" @click="listQuery.code = '';search()" />
          </div>
          <div v-if="key === 'enterpriseId'" class="filter-item">
            所属企业：{{ getEnumTxt(options, val) }}<i class="el-icon-close" @click="listQuery.enterpriseId = '';search()" />
          </div>
        </div>
        <el-button type="text" style="padding:0;margin-left:20px;" @click="clearQuery">清空筛选结果</el-button>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备列表<em>（共{{ total }}条记录）</em></span>
        <!-- <el-button v-waves size="middle" type="primary" class="filter-item" style="float: right; margin-left: 10px;" @click="handUpdate(1, '')">
          添加
        </el-button> -->
        <el-link type="primary" class="filter-item" style="float: right; margin-left: 10px;" @click="handUpdate(1, '')">
          添加
        </el-link>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="leftWide">
            <!-- start 列表 -->
            <el-table
              v-loading="listLoading"
              :data="list"
              height="550"
              style="width: 100%"
              :fit="true"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
              <el-table-column type="index" width="50" label="#" align="center" />
              <el-table-column label="设备名称" prop="name" :width="150" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="设备编号" prop="code" :width="150" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="设备所属企业" prop="enterprise" :width="150" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="负责人" prop="contacts" :width="150" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="负责人电话" prop="contactsPhone" :width="120" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="设备具体位置" prop="position" :width="240" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="操作" class-name="small-padding fixed-width" fixed="right" :width="250" align="center">
                <template slot-scope="scope">
                  <template>
                    <el-link type="info" size="mini" @click="handUpdate(3, scope.row)">
                      查看
                    </el-link>
                  </template>
                  <template>
                    <el-link type="primary" size="mini" @click="handUpdate(2, scope.row)">
                      修改
                    </el-link>
                  </template>
                  <template>
                    <el-link type="primary" size="mini" @click="deviceDelete(scope.row)">
                      删除
                    </el-link>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end" style="margin-top:15px;">
          <!-- start 分页 -->
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="text-align:right;" @pagination="queryDeciveList" />
          <!-- end 分页 -->
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
// api
import { queryDeciveList, deviceDelete } from '@/api/device/sysDevice'
import { queryEnterpriseList } from '@/api/enterprise/sysEnterprise'
// 水波纹插件
import waves from '@/directive/waves'
// 分页
import Pagination from '@/components/Pagination'

export default {
  name: 'SysDevice',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      activeIndex: '1',
      showF: false,
      showT: false,
      total: 0,
      list: [],
      listLoading: false,
      leftWide: 24,
      rightWide: 0,
      roleUserId: '',
      roleUserName: '',
      listQuery: {
        page: 1,
        limit: 10,
        name: '',
        code: '',
        enterpriseId: ''
      },
      treeProps1: {
        value: 'departmentId',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      treeProps2: {
        id: 'roleId',
        label: 'roleName'
      },
      options: [],
      roleData: [],
      roleValue: []
    }
  },
  created() {
    this.queryEnterpriseList()
    this.queryDeciveList()
  },
  methods: {
    queryEnterpriseList() {
      const curVue = this
      const query = {
        page: 0,
        limit: 0
      }
      queryEnterpriseList(query).then(res => {
        if (res.code === 1) {
          console.log(res.data.enterpriseList)
          for (const enterprise of res.data.enterpriseList) {
            curVue.options.push({ value: enterprise.enterpriseId, label: enterprise.name })
          }
        } else {
          curVue.noticeUtil.errorMsg('用户获取失败！')
        }
      })
    },
    queryDeciveList() {
      const curVue = this
      const query = {
        page: curVue.listQuery.page,
        limit: curVue.listQuery.limit,
        name: curVue.listQuery.name,
        code: curVue.listQuery.code,
        enterpriseId: curVue.listQuery.enterpriseId
      }
      queryDeciveList(query).then(res => {
        if (res.code === 1) {
          curVue.listLoading = false
          curVue.list = res.data.deviceList
          curVue.total = res.data.totalCount
        } else {
          curVue.noticeUtil.errorMsg('用户获取失败！')
        }
      })
    },
    handUpdate(type, data) {
      this.$router.push({ path: '/device/updateDevice', query: { data: data.deviceId, type: type + '' }})
    },
    clearQuery() {
      this.listQuery.name = ''
      this.listQuery.code = ''
      this.listQuery.enterpriseId = ''
      this.showT = false
      this.queryDeciveList()
    },
    search() {
      this.showF = false
      if (this.listQuery.name.length > 0 ||
      this.listQuery.code.length > 0 ||
      this.listQuery.enterpriseId.length > 0) {
        this.showT = true
      } else {
        this.showT = false
      }
      this.queryDeciveList()
    },
    getEnumTxt(optionList, enumVal) {
      const tempOptionList = optionList.filter(option => enumVal === option.value)
      if (tempOptionList.length > 0) {
        return tempOptionList[0].label
      } else {
        return ''
      }
    },
    deviceDelete(data) {
      const curVue = this
      const query = {
        deviceId: data.deviceId
      }
      deviceDelete(query).then(res => {
        if (res.code === 1) {
          curVue.noticeUtil.msg('删除设备成功！')
          this.queryDeciveList()
        } else {
          curVue.noticeUtil.errorMsg('删除设备失败！')
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.search-bar{
  position: relative;
  z-index: 2000;
  width: 100%;
  .base-condition{
    padding: 0 40px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
    .el-menu-demo,.el-menu-demo *{
      line-height: 50px;
      height: 50px;

      .el-menu-item{
        padding: 0 8px;
        margin-right: 20px;
      }
    }
  }
  .more-condition{
    position: absolute;
    top: 65px;
    background: #fff;
    width: 100%;
    height: auto;
    padding: 20px 40px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
  }
  .query-result{
    margin-top: 5px;
    font-size: 12px;
    color: #4c596e;
    padding: 15px 30px;
    background: #fbfdff;
  }
  .query-result *{
    line-height: 25px;
  }
  .filter-item{
    display: inline-block;
    padding: 0 10px;
    margin-left: 10px;
    border-radius: 12px;
    background: #e5e9f2;
    color: #7f8997;
  }
  .filter-item i{
    margin-left: 5px;
    font-weight: 700;
    cursor: pointer;
  }

}
.radius-input >>> input{
  border-radius: 100px !important;
}
</style>
<style scoped>
.radius-input >>> input{
      border-radius: 100px !important;
    }
</style>
